<template>
  <div>
    <el-row>
      <el-col :span="6" style="padding: 10px; border: 1px solid #ccc; text-align: center">
        <img style="width: 80%;" src="@/assets/logo.png" alt="">
        <div style="text-align: center">这是一段很OK的测试</div>
        <div style="text-align: center;color: red">￥99</div>
      </el-col>
      <el-col :span="6" style="padding: 10px; border: 1px solid #ccc; text-align: center">
        <img style="width: 80%;" src="@/assets/logo.png" alt="">
        <div style="text-align: center">这是一段很OK的测试</div>
        <div style="text-align: center;color: red">￥99</div>

      </el-col>
      <el-col :span="6" style="padding: 10px; border: 1px solid #ccc; text-align: center">
        <img style="width: 80%;" src="@/assets/logo.png" alt="">
        <div style="text-align: center">这是一段很OK的测试</div>
        <div style="text-align: center;color: red">￥99</div>

      </el-col>
      <el-col :span="6" style="padding: 10px; border: 1px solid #ccc; text-align: center">
        <img style="width: 80%;" src="@/assets/logo.png" alt="">
        <div style="text-align: center">这是一段很OK的测试</div>
        <div style="text-align: center;color: red">￥99</div>

      </el-col>


    </el-row>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-row>

    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>

    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>

    <el-row style="margin-top: 20px">
      <el-col>
        <el-input style="width: 200px;" v-model="value"></el-input>
        <el-input style="width: 200px;" v-model="value1" type="textarea"></el-input>
        <el-input style="width: 200px;" v-model="password" show-password placeholder="请输入密码"></el-input>
        <el-input style="width: 200px;" v-model="password"  placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>
        <el-input style="width: 200px;" v-model="password"  placeholder="请输入内容" suffix-icon="el-icon-search"></el-input>
        <el-button>搜索</el-button>
      </el-col>
    </el-row>

    <el-row style="margin-top: 20px">
      <el-autocomplete style="width: 300px;" placeholder="请输入内容，我来猜猜猜看" :fetch-suggestions="querySearch" :trigger-on-focus="false" v-model="value3"></el-autocomplete>
    </el-row>

    <el-row style="margin-top: 20px">
      <el-select v-model="select1" @change="changeSelect">
        <el-option v-for="item in fruits" :key="item.id" :label="item.name" :value="item.name"></el-option>
      </el-select>

      <el-select v-model="select2" @change="changeSelectUser">
<!--      <el-select v-model="select2" @change="changeSelectUser" multiple>   multiple多选-->
        <el-option v-for="item in users" :key="item.card" :label="item.name" :value="item.card"></el-option>
      </el-select>

      <el-select v-model="select2" @change="changeSelectUser" filterable>
        <!--      <el-select v-model="select2" @change="changeSelectUser" filterable>   filterable搜索-->
        <el-option v-for="item in users" :key="item.card" :label="item.name" :value="item.card"></el-option>
      </el-select>
    </el-row>

    <el-row style="margin-top: 20px">
      <el-radio-group v-model="radio" @change="selectRadio">
        <el-radio label="男">男</el-radio>
        <el-radio label="女">女</el-radio>
      </el-radio-group>

      <el-checkbox-group v-model="checkList" @change="selectCheckbox">
        <el-checkbox label="男">男</el-checkbox>
        <el-checkbox label="女">女</el-checkbox>
      </el-checkbox-group>

      <el-date-picker  v-model="date" type="date" placeholder="请选择日期" value-format="yyyy-MM-dd" @change="changeDate"></el-date-picker>
      <el-date-picker  v-model="dateTime" type="datetime" placeholder="请选择日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDateTime"></el-date-picker>
      <el-date-picker  v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changeRange"></el-date-picker>
    </el-row>

    <el-row style="margin: 100px 0">
      <el-table :data="tableData" border :header-cell-style="{background: 'aliceblue', fontSize: '16px'}">
        <el-table-column prop="id" label="序号" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="age" label="年龄" align="center"></el-table-column>
        <el-table-column prop="address" label="地址" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

  </div>
</template>

<script>
export default {
  name: "Element",
  data(){
    return {
      value: '',
      value1: '',
      password: '',
      value3: '',
      select1: '',
      select2: '',
      coffese: [{"value":'1星巴克'},{"value":'2瑞幸'},{"value":'3奥利奥'}],
      fruits: [
        { name:'诗雨',id: 1 },
        { name:'深情',id: 2 },
        { name:'诗意',id: 3 },
      ],
      users: [
        { name : '小诗', card: 12397943231456789 },
        { name : '大诗', card: 454891325454545 },
        { name : '诗圣', card: 4554455454785879654 },
      ],
      radio: '男',
      checkList : [],
      date: '',
      dateTime: '',
      dateRange: '',
      tableData: [
        { name: '诗雨', address: '广西宁明县', id: 1, age: '22'},
        { name: '深情', address: '广西灵山县', id: 2, age: '22'},
        { name: '诗意', address: '广西大方县', id: 3, age: '23'},
      ]
    }
  },
  methods:{
    querySearch(query,cb){ // callback 回调函数
      // ? 如果query输入了，那么进行筛选v.includes(query)过滤成为一个新的数组  : 如果没有就用它输入的值
      let result =  query ? this.coffese.filter(v => v.value.includes(query)) : this.coffese
      console.log(result)
      cb(result)
    },
    changeSelect(){
      console.log(this.select1);
    },
    changeSelectUser(){
      console.log(this.select2);
    },
    selectRadio(){
      alert(this.radio)
    },
    selectCheckbox(){
      console.log(this.checkList)
    },
    changeDate(){
      console.log(this.date)
    },
    changeDateTime(){
      console.log(this.dateTime)
    },
    changeRange(){
      console.log(this.dateRange)
    },
    edit(row){
      // this.$message.success(row.name)
      // this.$notify.success(row.name)
      // this.$message.warning(row.name)
      this.$confirm('点击编辑弹出','这个是个弹框',{
        type: 'warning'
      }).then(res =>{
        this.$message.success("ok,我点击了确认")
      }).catch(res =>{
        this.$message.warning("ok,我点击了取消")
      })
    }
  }
}
</script>

<style scoped>

</style>